<template>
	<div>
		<div class="hello_d">
			<!-- 我的上部分 -->
			<router-link to="wode">
				<div class="top_d">
					<div class="tpleft_d">&#xe74a;</div>
					<div class="tpright_d">账户信息</div>
				</div>
			</router-link>
		</div>
		<div class="serve">
			<div class="txt">
				<span>头像</span>
				<!-- <img src="../assets/default.jpg" alt=""> -->
				<img src="../assets/jiantou.png" alt="">
			</div>
			<div class="txt">
				<span>用户名</span>
				<img src="../assets/jiantou.png" alt="">
			</div>
			<div class="txt">
				<span>收货地址</span>
				<img src="../assets/jiantou.png" alt="">
			</div>
			<p class="main">账号绑定</p>
		</div>
		<div class="ji">
			<img src="../assets/sj_l.png" alt="" id="img">
			<span>手机</span>
			<img src="../assets/jiantou.png" alt="">
		</div>
		<p class="masn">安全设置</p>
		<div class="jin">
			<span>登录密码</span>
			<img src="../assets/jiantou.png" alt="">
			<p class="xxs">修改</p>
		</div>
		<p class="du">退出登录</p>
	</div>
</template>

<script>

</script>

<style scoped>
	.hello_d {
		width: 100%;
		height: 2.5rem;
		background: #3190E8;
	}

	.top_d {
		width: 100%;
		height: 50px;
		border-bottom: 1px solid white;
		line-height: 50px;
	}

	.tpleft_d {
		font-family: 'iconfont';
		position: absolute;
		left: 0;
		top: 0;
		font-size: 20px;
		color: #ffffff;
	}

	.tpright_d {
		position: fixed;
		right: 35%;
		top: 0;
		font-size: 50px;
	}

	@font-face {
		font-family: 'iconfont';
		src: url('//at.alicdn.com/t/font_1566197_psfss4eivem.eot');
		src: url('//at.alicdn.com/t/font_1566197_psfss4eivem.eot?#iefix') format('embedded-opentype'),
			url('//at.alicdn.com/t/font_1566197_psfss4eivem.woff2') format('woff2'),
			url('//at.alicdn.com/t/font_1566197_psfss4eivem.woff') format('woff'),
			url('//at.alicdn.com/t/font_1566197_psfss4eivem.ttf') format('truetype'),
			url('//at.alicdn.com/t/font_1566197_psfss4eivem.svg#iconfont') format('svg');
	}

	.serve {
		width: 750px;
		height: 400px;
		background-color: whitesmoke;

	}

	.txt {
		width: 730px;
		height: 80px;
		margin-left: 0px;
		margin-top: 50px;
		display: inline-block;
		line-height: 80px;
		font-size: 30px;
		position: relative;
		border-bottom: 1px solid #DDDDDD;
	}

	.txt span {
		margin-left: 30px;
	}

	.txt img {
		width: 70px;
		height: 70px;
		position: absolute;
		right: 5px;
		top: 6px;
	}

	.main {
		font-size: 30px;
		margin-left: 20px;
		margin-top: 40px;
	}

	.ji {
		height: 100px;
		margin-top: 100px;
		position: relative;
		background-color: #EEEEEE;
	}

	.ji span {
		position: absolute;
		left: 30px;
		top: 30px;
		margin-left: 50px;
	}

	.ji img {
		width: 70px;
		height: 70px;
		position: absolute;
		right: 5px;
		top: 20px;
	}

	#img {
		position: absolute;
		left: 10px;
		top: 10px;
		margin-left: 10px;
	}

	.masn {
		font-size: 30px;
		margin-left: 20px;
		margin-top: 30px;
	}

	.jin {
		height: 100px;
		margin-top: 30px;
		position: relative;
		background-color: #EEEEEE;
	}

	.jin span {
		position: absolute;
		top: 30px;
		margin-left: 20px;
	}

	.jin img {
		width: 70px;
		height: 70px;
		position: absolute;
		right: 5px;
		top: 20px;
	}
	.xxs{
		margin-left: 600px;
		font-size: 30px;
		display: inline-block;
		line-height: 110px;
	}
    .du{
		width: 96%;
		margin: 1.3rem auto 0;
		line-height: 2.1rem;
		border-radius: 5px;
		text-align: center;
		background-color: #EE5757;
		font-size: 40px;
		color: #FFFFFF;
	}
</style>
